<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!--创建一个被Vue所管理的容器 -->
  <div id="app">
    <h1>{{message}}</h1>
  </div>
  <script src="../../javascript//vue.js"></script>
  <script>
    /*
    Vue的核心包分为开发版本和生产版本，开发版本包含完整的警告和调试模式，生产版本则删除了警告
    使用script标签引入vue文件时全局多个Vue的构造函数，new Vue就能得到一个实例并且传入配置对象

    el：
    - **类型**：`string | Element`
    - **限制**：只在用 `new` 创建实例时生效。
    - 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 `vm.$el` 访问。

    data：
    - **类型**：`Object | Function`
    - **限制**：组件的定义只接受 `function`
    - Vue 实例的数据对象。Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化 
     */
    
    /* 创建一个Vue的实例并且传入配置对象*/
    const vm = new Vue({
      el: "#app",//指定挂载点
      data() {//响应式数据
        return {
          message: "Hello Vue"
        }
      }
    })
  </script>
</body>

</html>